<div class="layui-fluid nepadmin-pad0 nepadmin-mar0" id="VIEW-room-list" lay-title="实验室管理">
    <div class="layui-card" style="margin-bottom: 12px;">
        <div class="layui-card-body nepadmin-pad30">
            <div class="layui-row">
                <div class="layui-col-lg12"></div>

                <form class="layui-form" action="" lay-filter="form-group">
                    <div class="layui-form-item">
                        <label class="layui-form-label">实验中心</label>
                        <div class="layui-input-block">
                            <div class="layui-inline" style="width: 240px;">
                                <select name="center_id" id="f_center" lay-verify="required" lay-filter="form-group-center">
                                    <option value=0>全部</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-btn layui-btn-sm room-list-add" data-type="add">添加</div>
                            </div>
                        </div>
                    </div>
                </form>
                <!--
                <h2 class="nepadmin-pad-b10">实验室管理</h2>
                <p class="nepadmin-c-gray">如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。</p>
-->
            </div>
        </div>
    </div>
    <input class="layui-upload-file" id="input-img" type="file" accept="image/*" name="file">
    <div class="layui-row layui-col-space15 nepadmin-pad20" id="rooms-table" style="height:800px;overflow:hidden;overflow-y:auto;">

    </div>
</div>
<script>
    layui.use(['admin', 'form', 'element', 'helper', 'table', 'util', 'flow', 'upload'],
        function(admin, form, element, helper, table, util, flow, upload) {
            var $ = layui.$

            var view = $('#VIEW-room-list');

            var center_list;

            admin.get({
                api: 'centers',
                success: function(res) {
                    if (res.code == 200) {
                        layui.each(res.data, function(index, item) {
                            $('#f_center').append('<option value=' + item.center_id + '>' + item.name + '</option>');
                        });
                        form.render('select');
                        center_list = res.data;
                    }
                },
                complete: function() {

                }
            });

            form.render(null, 'form-group');

            var updata = new Object();
            updata.action = "list";
            updata.center = 0;

            updata.size = 12;
            creat_flow();


            /* 监听实验中心选择 */
            form.on('select(form-group-center)', function(data) {
                console.log(data);
                if (updata.center != data.value) {
                    updata.center = data.value;
                    $('#rooms-table').empty();
                    creat_flow();
                }
            });

            /*添加实验室*/
            view.find('.room-list-add').click(function() {
                var podata = new Array();
                podata.center_id = $('#f_center').val();
                podata.center_list = center_list;
                admin.popup({
                    url: '/room/room_set',
                    title: '添加实验室',
                    area: 'auto',
                    maxWidth: 420,
                    offset: '100px',
                    data: podata
                })
            });

            var upload_room_id;
            var upload_img_update;
            //上传图片按钮
            $('#rooms-table').on('click', '.img-upload', function(e) {
                console.log(e);
                $('#input-img').click();
                upload_room_id = e.currentTarget.dataset.id;
                upload_img_update = $(this);
            })
            $('#input-img').on('change', function(e) {
                console.log(e);

                var file = e.currentTarget.files[0];
                var formData = new FormData();
                formData.append('file', file);

                //提交文件
                $.ajax({
                    url: '/api/rooms?room_id=' + upload_room_id,
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    headers: layui.conf.requestHeaders,
                    success: function(res) {
                        if (res.code != 200) {
                            layer.msg('图片更新失败');
                        } else {
                            layer.msg('图片更新成功');
                            upload_img_update.attr('src', res.data);
                        }
                    },
                    error: function() {
                        layer.msg('请求上传接口出现异常');
                    }
                });

            })

            //编辑实验室
            $('#rooms-table').on('click', '.room_change', function(e) {
                console.log(e);
                var podata = new Array();
                podata.room_id = e.currentTarget.dataset.id;
                podata.center_list = center_list;

                admin.popup({
                    url: '/room/room_set',
                    title: '修改实验室信息',
                    area: 'auto',
                    maxWidth: 420,
                    offset: '100px',
                    data: podata
                })
            })


            function creat_flow() {
                flow.load({
                    elem: '#rooms-table', //流加载容器
                    scrollElem: '#rooms-table',
                    isLazyimg: true,
                    mb: 0,
                    done: function(page, next) { //执行下一页的回调

                        updata.page = page;
                        //模拟数据插入
                        /*setTimeout(function() {
                            var lis = [];
                            for (var i = 0; i < 16; i++) {
                                lis.push(get_div(i))
                            }

                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < 10); //假设总页数为 10
                        }, 1000);*/


                        admin.get({
                            api: 'rooms',
                            data: updata,
                            success: function(res) {
                                if (res.code == 200) {
                                    var lis = [];

                                    layui.each(res.data, function(index, item) {
                                        lis.push(get_div(item.name, item.room_id, item.img_src));
                                    });
                                    next(lis.join(''), page < res.pages);
                                }
                            },
                            complete: function() {

                            }
                        });

                    }
                });
            }

            function get_div(name, id, img) {
                div = '<div class="layui-col-sm3 layui-col-xs12"> \
                        <div class="layui-card"> \
                        <div class="layui-card-cover"> \
                        <img class="img-upload" data-id=' + id + ' style="cursor: pointer" lay-src="' + img + '" alt=""> \
                        </div> \
                        <div class="layui-card-header" style="text-align:right"> \
                            <span class="nepadmin-fl">' + name + ' </span>\
                            <div class="layui-btn layui-btn-xs room_change" data-id=' + id + '> \
                                <i class="layui-icon">&#xe83f;</i> \
                            </div> \
                        </div> \
                        </div> \
                        </div>'

                return div;
            }
        });
</script>